<template>
  <div>
	  <!-- 图片分类滑动区域 -->
      <div id="slider" class="mui-slider ">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll" >
						
						<a  v-for ="item in getimgcategorylist" :key="item.id"  :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" @tap="getimages(item.id)" >
							{{item.title}}
						</a>
						
						
					</div>
				</div>

		</div>
		<!-- 图片懒加载区域 -->
		<ul class="ul">
			<router-link v-for="item in list" :key="item.id" tag="li" :to="'/home/photoInfo/'+item.id">
				<img v-lazy="item.img_url">
				<div class="info">
					<h1 class="info-title">{{item.title}}</h1>
					<div class="info-body">{{item.zhaiyao}}</div>
				</div>
			</router-link>
		</ul>
      
  </div>
</template>


<script>
    import mui from '../../lib/mui/js/mui.min.js'
   
export default {
    data(){
        return {
			getimgcategorylist:[],//存放分类数据
			list:[]//存放全部图片数据
		}
    },
	created(){
		this.getimgcategory(),
		this.getimages(0)//默认加载全部
	},
    mounted(){//操作DOM，DOM是最新的，同时也挂载到页面中
        //初始化scroll控件
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    methods:{
		getimgcategory(){
			this.$http.get("api/getimgcategory").then(result =>{
				if(result.body.status===0){
					result.body.message.unshift({title:"全部",id:0})
					this.getimgcategorylist=result.body.message
				}
			})
		},
		getimages(id){//获取图片列表
			this.$http.get("api/getimages/"+id).then(result =>{
				if(result.body.status===0){
					this.list=result.body.message
				}
			})
		}
	}
 
  
  
 
  
}
</script>


<style lang="less" scoped>
*{
    touch-action: pan-y
}

.ul{
	list-style:none;
	margin: 0;
	padding:10px;
	padding-bottom:0px;
	li{
		margin-bottom:10px;
		text-align: center;
		box-shadow:0  0 6px #ccc;
		position: relative;
		img{
			width:100%;
			display: block;
		}
		img[lazy=loading] {
			width: 40px;
			height: 300px;
			margin: auto;
			
		}
		.info{
			position: absolute;
			bottom:0px;
			background: rgba(0,0,0,0.4);
			color:white;
			text-align:left;
			max-height:80px;
			.info-title{
				font-size: 12px;
			}
			.info-body{
				font-size: 10px;
			}
		}
	}
}
</style>
